<template>
    <div class="app-container">
        <el-form :model="searchForm" inline ref="searchForm" style="position:relative;">
            <el-row>
                <el-col :span="20">
                    <el-form-item label="订单状态：" prop="indentStatus">
                        <el-select clearable v-model="searchForm.indentStatus" placeholder="请选择">
                            <el-option v-for="item in indentStatusOpt" :key="item.value" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-button type="primary" @click="init('search')" >查询</el-button>
                </el-col>
                <el-col :span="4">
                    
                </el-col>
            </el-row>
        </el-form>
        <el-table border :data="tableData" style="width: 100%;margin-top: 20px;">
            <el-table-column prop="indentNo" label="订单编号" align="center"></el-table-column>
            <!-- <el-table-column prop="addresseeDistrictId" label="所在区域" align="center"></el-table-column> -->
            <el-table-column prop="addresseeDetail" label="详细地址" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column prop="addresseeLinkman" label="联系人" align="center"></el-table-column>
            <el-table-column prop="addresseePhone" label="联系电话" align="center" width="120"></el-table-column>
            <!-- <el-table-column prop="amount" label="金额" align="center"></el-table-column> -->
            <!-- <el-table-column prop="amountPaid" label="实付金额" align="center"></el-table-column> -->
            <el-table-column prop="indentStatus" :formatter="indentStatusFun" label="订单状态" align="center"></el-table-column>
            <!-- <el-table-column prop="paymentStatus" :formatter="paymentStatusFunFun" label="支付状态" align="center"></el-table-column> -->
            <!-- <el-table-column prop="receiveTime" label="收货时间" align="center" width="160"></el-table-column> -->
            <!-- <el-table-column prop="remark" label="备注" show-overflow-tooltip align="center"></el-table-column> -->
            <!-- <el-table-column prop="information" label="用户" align="center"></el-table-column> -->
            <!-- <el-table-column prop="logisticCode" label="快递单号" align="center"></el-table-column> -->
            <!-- <el-table-column prop="shipmentStatus" label="配送状态" align="center"></el-table-column> -->
            <!-- <el-table-column prop="deliveryTime" label="发货时间" align="center" width="160"></el-table-column> -->
            <el-table-column prop="cancelTime" label="取消时间" align="center" width="160"></el-table-column>
            <el-table-column prop="shipperCode" label="物流公司编码" align="center" width="160"></el-table-column>
            <el-table-column label="操作" width="160" fixed="right" align="center">
                <template slot-scope="scope">
                    <el-button @click.stop="editClick(scope.row)" v-show="scope.row.indentStatus == 2" type="primary" plain size="mini">设置物流编号</el-button>
                    <el-button @click.stop="StatusClick(scope.row)" v-show="scope.row.indentStatus == 1" type="warning" plain size="mini">取消订单</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @current-change="getList" layout="total, prev, pager, next, jumper" :total="pageData.totalElements"></el-pagination>
        <!-- 弹框 -->
        <el-dialog :visible.sync="showDialog" width="800px">
            <el-form ref="dataForm" :rules="rules" :model="dataForm" label-position="left" label-width="100px" style="margin: 0px 50px;">
                <el-form-item label="快递单号：" prop="logisticCode">
                    <el-row>
                        <el-col :span="20"><el-input v-model="dataForm.logisticCode" placeholder="必填项。查询快递单号获取物流公司"></el-input></el-col>
                        <el-col :span="4"><el-button type="primary" @click="logisticCodeChange" style="display: inline-block;margin-left: 10px;">添加</el-button></el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="物流公司：" prop="shipperCode">
                    <el-select v-model="dataForm.shipperCode" disabled placeholder="请选择" style="width: 100%;">
                        <el-option v-for="item in shipperCodeOpt" :key="item.ShipperCode" :label="item.ShipperName" :value="item.ShipperCode"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="addSubmit('dataForm')" type="primary">保存</el-button>
                    <el-button @click="cancelClick('dataForm')">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { addRecord, findRecord, detailRecord, delRecord, editLogisticInfoRecord, editIndentStatusRecord } from '@/api/good-order/good-order-list'
import { findLogisticsCodeRecord } from '@/api/good-order/logistics-tracking'
import { getCookie, setCookie } from '@/utils/auth'
export default {
    name: 'Indent',
    data() {
        return{
            tableData: [],
            nowTit: '',
            nowId: '',
            showDialog: false,
            dataForm: {
                shipperCode: '',
                logisticCode: '',
            },
            rules: {},
            searchForm: {
                indentStatus: '',
                sysUserId: '',
            },
            nowPage: 0,
            pageSize: 10,
            imageUrl: '',
            formData: {},
            popStatus: 0,  //0为添加，1为修改
            pageData: {},
            indentStatusOpt: [
                {value: '1', name: '未付款'},
                {value: '2', name: '已付款'},
                {value: '3', name: '已发货'},
                {value: '4', name: '已签收'},
                {value: '5', name: '退货申请'},
                {value: '6', name: '退货中'},
                {value: '7', name: '已退货'},
                {value: '8', name: '取消交易'},
            ],
            shipperCodeOpt: [],
        }
    },
    methods: {
        //默认函数
        init(params){
            const _this = this;
            if(params == 'search'){
                _this.nowPage = 0
            }
            //获取列表信息
            findRecord(this.nowPage, this.pageSize, this.searchForm.indentStatus,this.searchForm.sysUserId).then(response => {
                if(response.code == 200){
                    _this.pageData = response.object;
                    _this.tableData = response.object.content;
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        //提交添加
        addSubmit(formName){
            let _this = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //提交
                    _this.dataForm.id = _this.nowId;
                    editLogisticInfoRecord(_this.dataForm.id,_this.dataForm.shipperCode,_this.dataForm.logisticCode).then(response => {
                        if(response.code == 200){
                            this.$message.success(response.message);
                            _this.init();
                            _this.showDialog = false;
                        }else{
                            this.$message.error(response.message);
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //删
        delClick(row){
            let _this = this;
            this.$confirm('确定删除 '+row.indentNo+' 吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //删除
                delRecord(row.id).then(response => {
                    if(response.code == 200){
                        this.$message.success(response.message);
                        _this.init();
                    }else{
                        this.$message.error(response.message);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
        },
        //设置物流编号
        editClick(row){
            this.nowId = row.id;
            this.dataForm.logisticCode = '';
            this.dataForm.shipperCode = '';
            this.showDialog = true;
        },
        //取消订单
        StatusClick(row){
            let _this = this;
            this.$confirm('确定取消 '+row.indentNo+' 吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //取消
                editIndentStatusRecord(row.id,8).then(response => {
                    if(response.code == 200){
                        this.$message.success(response.message);
                        _this.init();
                    }else{
                        this.$message.error(response.message);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
        },
        //快递单号  查询物流
        logisticCodeChange(){
            const _this = this;
            findLogisticsCodeRecord(_this.dataForm.logisticCode).then(response => {
                if(response.code == 200){
                    let obj = JSON.parse(response.object);
                    _this.shipperCodeOpt = obj.Shippers;
                    _this.dataForm.shipperCode = _this.shipperCodeOpt[0].ShipperCode;
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        //取消
        cancelClick(formName){
            this.showDialog = false;
            this.$refs[formName].resetFields();
        },
        //分页
        getList(val) {
            this.nowPage = val - 1;
            this.init();
        },
        //订单状态
        indentStatusFun(row){
            if(row.indentStatus === 1){
                return '未付款'
            }else if(row.indentStatus === 2){
                return '已付款'
            }else if(row.indentStatus === 3){
                return '已发货'
            }else if(row.indentStatus === 4){
                return '已签收'
            }else if(row.indentStatus === 5){
                return '退货申请'
            }else if(row.indentStatus === 6){
                return '退货中'
            }else if(row.indentStatus === 7){
                return '已退货'
            }else if(row.indentStatus === 8){
                return '取消交易'
            }
        },
        // 支付状态
        paymentStatusFun(row){
            if(row.paymentStatus === 1){
                return '未支付'
            }else if(row.paymentStatus === 2){
                return '已支付'
            }
        }
    },
    mounted(){
        this.init()
    }
}
</script>